<script setup>
import NavBar from "@/components/common/navbar/NavBar.vue";
import {computed, nextTick, onMounted, reactive, ref, watchEffect} from "vue";
import {getCategory, getCategoryGoods} from "@/network/category";
import BScroll from "better-scroll";
import BackTop from "@/components/common/backtop/BackTop.vue";
import {useRouter} from "vue-router";


const active = ref(0)
const activeKey = ref(0)
const categories = ref([])
const activeName = ref(0)
const currentOrder = ref('sales')
const currentId = ref(0)
const isShowBackTop = ref(false)
const router = useRouter()
let bScroll = reactive({});
const goods = reactive({
	sales: {page: 1, list: []},
	price: {page: 1, list: []},
	comments_count: {page: 1, list: []},
})

const tabClick = ({name}) => {
	currentOrder.value = name
	getCategoryGoods(currentOrder.value, currentId.value).then(res => {
		goods[currentOrder.value].list = res.goods.data
		nextTick(() => {
			bScroll && bScroll.refresh()
		})
	})
}
const getGoods = (id) => {
	currentId.value = id
	init()
}
const showGoods = computed(() => {
	return goods[currentOrder.value].list
})

const init = () => {
	getCategoryGoods('sales', currentId.value).then(res => {
		goods.sales.list = res.goods.data
	})
	getCategoryGoods('price', currentId.value).then(res => {
		goods.price.list = res.goods.data
	})
	getCategoryGoods('comments_count', currentId.value).then(res => {
		goods.comments_count.list = res.goods.data
	})
}

const bTop = () => {
	bScroll.scrollTo(0, 0, 300)
}

const itemClick = (id) => {
	router.push({path: '/detail', query: {id}})
}
onMounted(() => {
	getCategory().then(res => {
		categories.value = res.categories
	})
	init()
	// 创建 BetterScroll 对象
	bScroll = new BScroll(document.querySelector('.goodsList'), {
		probeType: 3,
		click: true,
		pullUpLoad: true
	})
	bScroll.on('scroll', (position) => {
		isShowBackTop.value = (-position.y) > 300
	})
	bScroll.on('scrollEnd', () => {

		goods[currentOrder.value].page += 1;

		getCategoryGoods(currentOrder.value, currentId.value).then(res => {
			goods[currentOrder.value].list.push(...res.goods.data)
			goods[currentOrder.value].page += 1;
		})

		bScroll.finishPullUp()
		nextTick(() => {
			bScroll && bScroll.refresh()
		})
	})
})
watchEffect(() => {
	nextTick(() => {
		bScroll && bScroll.refresh()
	})
})
</script>

<template>
	<div>
		<nav-bar>
			<template v-slot:default>商品分类</template>
		</nav-bar>
		<div class="mainBox">
			<div class="orderTab">
				<van-tabs v-model:active="active" @click-tab="tabClick">
					<van-tab name='comments_count' title="销量排序"></van-tab>
					<van-tab name='price' title="价格排序"></van-tab>
					<van-tab name='sales' title="评论排序"></van-tab>
				</van-tabs>
			</div>
			<van-sidebar v-model="activeKey" class="leftMenu">
				<van-collapse v-model="activeName" accordion>
					<van-collapse-item v-for="item in categories" v-show="item.id<100" :key="item.id" :name="item.id" :title="item.name">
						<van-sidebar-item v-for="sub in item.children" :key="sub.id" :title="sub.name" @click="getGoods(sub.id)"/>
					</van-collapse-item>
				</van-collapse>
			</van-sidebar>
			<div class="goodsList">
				<div class="content">
					<van-card
						v-for="item in showGoods"
						:key="item.id"
						:desc="item['updated_at']"
						:lazy-load="true"
						:price="item.price"
						:thumb="item['cover_url']"
						:title="item.title"
						num="2"
						origin-price="10.00"
						tag="标签"
						@click="itemClick(item.id)"
					/>
				</div>
			</div>
		</div>
		<back-top v-show="isShowBackTop" @bTop="bTop"></back-top>
	</div>
</template>

<style lang="scss" scoped>
.mainBox {
	margin-top: 45px;
	display: flex;

	.orderTab {
		flex: 1;
		float: right;
		height: 50px;
		z-index: 9;
		position: fixed;
		top: 45px;
		right: 0;
		left: 130px;
	}

	.leftMenu {
		width: 130px;
		position: fixed;
		top: 95px;
		left: 0;
	}

	.goodsList {
		flex: 1;
		height: 100vh;
		position: absolute;
		top: 100px;
		left: 130px;
		right: 0;
		text-align: left;

		.content {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}

	}
}
</style>